<template>
<div style="background-color: rgb(247, 248, 250);width: 100%;height: 100%">
  <van-nav-bar
    title="消息管理"
    left-arrow
    @click-left="$router.back()"
  />
  <van-notice-bar
    left-icon="volume-o"
    text="小妖怪会全心全意为您服务哒！我们不会随意打扰，请放心接收提醒，以免错过重要信息。"
  />
  <van-cell-group
    inset
    style="width: 90%;margin: 50px auto">
    <van-cell title="取出成功通知" label="提醒您已成功充电宝的通知">
      <button type="button" style="width:70px;height:30px;background-color: #28dece;border:1px solid #fff;border-radius: 10px;margin-top: 10px;color: white" @click="changeMessage(messageList[0])">{{messageList[0].message}}</button>
    </van-cell>
    <van-cell title="归还成功通知" label="提醒您归还充电宝的通知" >
        <button type="button" style="width:70px;height:30px;background-color: #28dece;border:1px solid #fff;border-radius: 10px;margin-top: 10px;color: white" @click="changeMessage(messageList[1])">{{messageList[1].message}}</button>
    </van-cell>
    <van-cell title="支付成功通知" value="内容" label="支付完成后会提醒您" >
      <button type="button" style="width:70px;height:30px;background-color: #28dece;border:1px solid #fff;border-radius: 10px;margin-top: 10px;color: white" @click="changeMessage(messageList[2])">{{messageList[2].message}}</button>
    </van-cell>
    <van-cell title="押金退款成功通知" value="内容" label="提醒您押金成功返还的通知" >
      <button type="button" style="width:70px;height:30px;background-color: #28dece;border:1px solid #fff;border-radius: 10px;margin-top: 10px;color: white" @click="changeMessage(messageList[3])">{{messageList[3].message}}</button>
    </van-cell>
  </van-cell-group>
</div>
</template>

<script>

export default {
  name: 'Message',
  data () {
    return {
      messageList: [
        {
          message: '订阅',
          isMessage: true
        },
        {
          message: '订阅',
          isMessage: true
        },
        {
          message: '订阅',
          isMessage: true
        },
        {
          message: '订阅',
          isMessage: true
        }
      ]
    }
  },
  methods: {
    changeMessage (index) {
      if (index.isMessage) {
        index.message = '已订阅'
      } else {
        index.message = '订阅'
      }
      index.isMessage = !index.isMessage
    }
  }
}
</script>

<style scoped>

</style>
